<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🛒 商城</title>
    <style>
        .shop {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
        }

        .product-card {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 12px;
            width: 150px;
            text-align: center;
            color: #000;
        }

        .product-card img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }

        .cart {
            margin-top: 20px;
            background: #f3f3f3;
            padding: 12px;
            border-radius: 8px;
            color: #000;
            display: flex;
            flex-direction: column;
            width: 700px;
            justify-self: center;
        }

        .payment-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border: 2px solid #42b983;
            border-radius: 8px;
            z-index: 9999;
            display: none;
        }

        .payment-modal input {
            display: block;
            margin-bottom: 10px;
            width: 100%;
            padding: 8px;
        }
    </style>
</head>
<body>
    <div>
        <h2>🛒 商城</h2>
        <div class="shop">
            <div class="product-card">
                <img src="images/product1.png" alt="产品1">
                <h4>像素T恤</h4>
                <p>￥99</p>
                <form action="addToCart.jsp" method="post">
                    <input type="hidden" name="productId" value="1">
                    <button type="submit">加入购物车</button>
                </form>
            </div>
            <div class="product-card">
                <img src="images/product2.png" alt="产品2">
                <h4>游戏手柄挂件</h4>
                <p>￥49</p>
                <form action="addToCart.jsp" method="post">
                    <input type="hidden" name="productId" value="2">
                    <button type="submit">加入购物车</button>
                </form>
            </div>
            <div class="product-card">
                <img src="images/product3.png" alt="产品3">
                <h4>复古徽章</h4>
                <p>￥29</p>
                <form action="addToCart.jsp" method="post">
                    <input type="hidden" name="productId" value="3">
                    <button type="submit">加入购物车</button>
                </form>
            </div>
        </div>

        <div class="cart">
            <h3>我的购物车</h3>
            <ul>
                <% 
                    String[] cartItems = (String[]) session.getAttribute("cart");
                    if (cartItems != null) {
                        for (String item : cartItems) {
                %>
                    <li><%= item %></li>
                <% 
                        }
                    }
                %>
            </ul>
            <form action="goToPayment.jsp" method="post">
                <button type="submit">去结算</button>
            </form>
        </div>

        <div id="paymentForm" class="payment-modal">
            <h3>填写收货信息</h3>
            <form action="openQRCode.jsp" method="post">
                <input type="text" name="address" placeholder="地址" required>
                <input type="text" name="phone" placeholder="电话" required>
                <p>总价：￥<%= session.getAttribute("totalPrice") != null ? session.getAttribute("totalPrice") : 0 %></p>
                <button type="submit">下一步</button>
                <button type="button" onclick="closePaymentForm()">取消</button>
            </form>
        </div>

        <div id="QRCode" class="payment-modal">
            <h3>扫码支付</h3>
            <img src="images/payment.png" alt="支付二维码" style="width: 200px;">
            <form action="completePayment.jsp" method="post">
                <button type="submit">已完成支付</button>
            </form>
        </div>
    </div>

    <script>
        function closePaymentForm() {
            document.getElementById("paymentForm").style.display = "none";
        }
    </script>
</body>
</html>